<template>
	<div style="width: 100%;">
	<div style="width: 100%;text-align: center;">
			<el-text size="large"><el-icon ><Memo /></el-icon>订单评论</el-text>
	</div>
	<br />
	<div style="background-color: #E1337F;height: 0.1rem;"></div>
	<el-card>
			<div style="width: 100%;">
			<el-table :data="data.remark" border style="width: 100%">
			<el-table-column type="expand">
				
				<template #default="remark">
					<h3 style="text-align: center;">评论信息</h3>
					<el-table :data="remark.row.remarks" :border="true">
						<el-table-column label="评论人" prop="user.uname"></el-table-column>
					<el-table-column label="评价" prop="rate">
						<template #default="car">
							<el-rate
							  v-model="car.row.rate"
							  disabled
							  show-score
							  text-color="#ff9900"
							  score-template="{value}"
							/>
						</template>
					</el-table-column>
					<el-table-column label="评论内容" prop="content" width="600"></el-table-column>
					<el-table-column label="评论时间" prop="remdate">
						<template #default="car">
							{{mytpost(car.row.remdate)}}
						</template>
					</el-table-column>
					<el-table-column label="操作">
					<template #default="car">
						  <el-button v-if="car.row.user.uid!=store.state.user.uid" style="background-color: #E1337F;color: #FFFFFF;" @click="reply(car.row.user.uid,car.row.commodity.comid)">回复</el-button>
						<el-button v-if="car.row.user.uid==store.state.user.uid" style="background-color: #E1337F;color: #FFFFFF;" disabled="">回复</el-button>
					</template>
					</el-table-column>
					</el-table>
				</template>
				</el-table-column>
				<el-table-column label="商品编号" prop="comid" ></el-table-column>
				<el-table-column label="商品名称" prop="comname" ></el-table-column>
				<el-table-column label="商品图片" prop="pic" >
					<template #default="car">
						<el-image style="width: 100px;height: 100px;"
							:src="$ip+`/public/shows/`+car.row.pic" />
						
						</template>
				</el-table-column>
				<el-table-column label="制造商" prop="makers"></el-table-column>
				<el-table-column label="生产日期"  >
					<template #default="car">
						{{mytpost(car.row.tmake)}}
					</template>
				</el-table-column>
				<el-table-column label="商品销量" prop="sales"></el-table-column>
				<el-table-column label="商品库存" prop="stock"></el-table-column>
				<el-table-column label="操作">
				<template #default="car">
					 <el-button style="background-color: #E1337F;color: #FFFFFF;" @click="doreply(car.row.comid)">评论商品</el-button>
				</template>
				</el-table-column>
			</el-table>
			<div style="margin-left: 33%;">
							 <el-pagination  :total="data.page.count" :page-count="myCeil(data.page.count/data.page.l)"
							 layout="jumper , prev, pager ,next ,total" @current-change="pageQuery" /> 
						  </div>
			</div>
			</el-card>
	</div>
</template>

<script lang="ts" setup>
	import {ref, reactive,onMounted,computed} from"vue"
		import {$get,$postx,$postj,$postf} from '../../ajax/index.js'
		import { ElMessage, ElMessageBox } from 'element-plus'
		import { User,Lock,Memo} from '@element-plus/icons-vue'
		import router from"../../router/index.js"
		import store from "../../store/index.js"
		import {success,warning,message,errors} from '../../store/alert.js'
		const data=reactive({
			remark:[],
			page:{
				p:0,
				l:5,
				count:0
			}
			
		})
		
		function doreply(comid){
			
			router.push({
				path:"/cus/cusreply",
				query:{
					c:comid
				}
			})
		}
		
		
		function reply(uid,comid){
			router.push({
				path:"/cus/cusreply",
				query:{
					uid:uid,
					comid:comid
				}
			})
		}
		const mytpost = computed(() => {
			return function(tpost) {
				if(tpost==undefined)return ""
				console.log(tpost)
				let t = new Date(tpost)
				let yy = t.getFullYear()
				let mm = t.getMonth() + 1
				let dd = t.getDate()
				let a = yy + "年" + mm + "月" + dd + "日"
				console.log(a)
				return a
			}
		})
		
		function pageQuery(val=1){
			// 翻页跳转
			
			let pagenum=data.page.l*val-data.page.l
			data.page.p=pagenum
			$get("/cus/remark/findAll/"+data.page.p+"/"+data.page.l).then((read)=>{
				data.remark=read.data.data.remark
				data.page.count=read.data.data.count				
			})
			
			}
		const myCeil = computed(() => {
				return function(a) {
					var s= Math.ceil(a)
					return s
				}
			})
		onMounted(()=>{
			$get("/cus/remark/findAll/"+data.page.p+"/"+data.page.l).then((read)=>{
				data.remark=read.data.data.remark
				data.page.count=read.data.data.count				
			})
			
			
		})
		
		
</script>

<style>
</style>
